<template>
  <div>
    <mynavbar></mynavbar>
    <img
      src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png"
      alt=""
    />

    <div class="ip">
      <div class="sjh">
        <input type="text" placeholder="邮箱账号" v-model="loginid" />
      </div>
      <div class="yzm">
        <input type="text" placeholder="密码" v-model="loginpwd" />
      </div>
      <div class="text">
        <span @click="emitreg">注册账号</span>
        <span @click="showPopup">忘记密码</span>
        <van-popup v-model="show">忘记了密码就试试用手机号登录吧</van-popup>
      </div>
      <div class="dl">
        <button @click="yxyz">登录</button>
      </div>

      <div class="qiehuan" @click="fun">
        <p>其他登录方式></p>
      </div>
    </div>
  </div>
</template>

<script>
import mynavbar from "../item/mynavbar.vue";
export default {
  data() {
    return {
      loginid: "",
      loginpwd: "",
      show: false,
    };
  },
  components: {
    mynavbar,
  },
  methods: {
    fun() {
      this.$router.push("/my").catch((err) => {});
    },
    yxyz() {
      let reg = /^\d{9,10}@qq.com$/;
      if (reg.test(this.loginid)) {
        let myid = sessionStorage.getItem("id");

        let mypwd = sessionStorage.getItem("pwd");

        if (this.loginid == myid) {
          if (this.loginpwd == mypwd) {
            alert("登录成功");
            this.$router.push("/personal").catch((err) => {});
            sessionStorage.setItem("phone", this.loginid);
          } else {
            alert("密码错误");
          }
        } else {
          alert("该用户没注册请注册");
        }
      } else {
        alert("请输入正确的邮箱");
      }
    },
    emitreg() {
      this.$router.push("/emitregister").catch((err) => {});
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
img {
  width: 8.375rem;
  height: 2.8125rem;
  position: absolute;
  top: 6.125rem;
  left: 7.125rem;
}

input {
  width: 13.75rem;
  border: none;
  height: 2.125rem;
}
.ip {
  display: flex;
  height: 7.5rem;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 10.25rem;
  left: 1.25rem;
}
.sjh {
  border-bottom: 1px solid #999;
  height: 3.75rem;
  line-height: 3.75rem;
  width: 20rem;
}
.yzm {
  border-bottom: 1px solid #999;
  height: 3.75rem;
  line-height: 3.75rem;
  width: 20rem;
}

.text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 20rem;
  margin: 0.825rem 0;
}
span {
  color: #999;
}
.dl button {
  width: 20rem;
  height: 2.5rem;
  text-align: center;
  color: #fff;
  background: #dd1a21;
  border: none;
}
.qiehuan {
  text-align: center;
  margin-top: 1.8125rem;
}
</style>